<template>
  <div class="person">
    <h2>姓名：{{ name }}</h2>
    <h2>姓名：{{ age }}</h2>
    <h2>姓名：{{ c }}</h2>
    <!-- <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button> -->
  </div>
</template>

<script lang="ts">
import {ref, reactive} from 'vue'
// ref 可以定义：基本类型，对象类型的响应数据
// reactive 只能定义：对象类型的响应数据
export default {
  name: 'Person',
  setup(){
    // console.log(this) setup 函数中的this是undefined, Vue3中已经弱化this了
    // 数据，原来是写在data中的，此时的name、age、tel都不再是响应式的数据
    let name = '张三' // 此时的name不是响应式的
    let age = 18 // 此时的age不是响应式的
    let tel = '13888888888' // 此时的tel不是响应式的
    // let x = d
    // 方法
    function changeName (){
      name = 'zhang-san' // 注意：这样修改的name，页面不会发生变化
      console.log(name) // name确实改了，但name不是响应式
    }
    function changeAge (){}
    function showTel (){}
    // 将数据、方法交出去模板中才可以使用
    return {name, age, tel, changeName, changeAge, showTel}
    // setup的返回值也可以是一个渲染函数
    // return ()=> '哈哈'
  },
  data(){
    // data可以读取setup里定义的数据  因为 setup的生命周期比beforeCreated早
    // vue2的选项式语法可以和vue3的setup语法共存，旧的写法里可以读setup里的数据，setup不可以读取旧的写法里的数据
    return {
        a: 100,
        c: this.name,
        d: 900
    }
  },
  methods: {
    changeName() {
        this.name = 'zhang-san'
    },
    changeAge() {
        this.age += 1
    },
    showTel () {
        alert(this.tel)
    }
  }
}
</script>

<style scoped>
    .person {
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
</style>
